<style lang="scss">
.box {
   height: 100vh;
   background: #efeeee;
}

.header {
   width: 100vw;
   display: flex;
   background: #fff;

   img {
      width: 100px;
      height: 100px;
      margin: 10px;
      border-radius: 10px;

   }

   span {
      font-size: 22px;
      color: red;
      margin-left: 8px;

   }

   p {
      font-size: 18px;
      font-weight: 400;
      margin-left: 10px;
   }
}

.time {
   width: 100vw;
   position: relative;
   background: #fff;

   .time_two {
      margin: 5px;
      display: flex;
      border: 1px solid #ccc;
      flex-wrap: wrap;
      box-sizing: border-box;
      overflow: hidden;
   }

   .time_one {
      width: 2px;
      height: 15px;
      background: red;
      position: absolute;
      left: 6px;
      top: 1px;
   }

   p {
      margin-left: 10px;
      font-weight: 600;

      span {
         font-weight: 300;
      }
   }
}

.teach {
   width: 100vw;
   position: relative;
   background: #fff;
   
   .time_one {
      width: 2px;
      height: 15px;
      background: red;
      position: absolute;
      left: 6px;
      top: 13px;

   }

   .time_two {
      width: 50px;
      height: 60px;

      margin-left: 20px;
      margin-top: 10px;

      img {
         width: 25px;
         margin-left: 13px;
      }
   }

   p {
      margin-left: 10px;
      font-weight: 600;

      span {
         font-weight: 300;
      }
   }
}

.times_one {
   margin-top: 10px;
   margin-left: 10px;
   // display: flex;
   // justify-content: center;
   // align-items: center;
   width: 47px;
   height: 30px;
   // padding-left: 10px;
   padding-right: 10px;
   box-sizing: border-box;
   border: 1px solid #666;
   border-radius: 5px;

   line-height: 30px;
   text-align: center;
   font-size: 14px;
   color: #333;
   background: #fff;
}

.notes {
   width: 100vw;
   position: relative;
   background: #fff;
   height: 25vh;

   .time_one {
      width: 2px;
      height: 15px;
      background: red;
      position: absolute;
      left: 6px;
      top: 1px;
   }



   p {
      margin-left: 10px;
      font-weight: 600;
   }
}

.footer {
   background: #fff;
   height: 9vh;
   margin-top: 8px;
   position: fixed;
   bottom: 0;
   left: 0;
   right: 0;


   span {
      color: red;
      font-size: 22px;
      font-weight: 600;
      position: absolute;
      bottom: 10px;


   }

   button {
      width: 120px;
      height: 40px;
      border-radius: 20px;
      border: none;
      background: red;
      color: #fff;
      font-size: 16px;
      position: absolute;
      right: 5px;
      top: 10px;
   }
}

.popup {
   margin: 10px;
   height: 50px;
   border-bottom: 1px solid #ccc;
   display: flex;

   img {
      width: 50px;
      height: 40px;
   }

   p {
      margin-left: 5px;
   }
}

.popup_one {
   margin: 10px;
   border-bottom: 1px solid #ccc;

   div {
      display: inline-block;

      width: 130px;
      height: 30px;
      background: rgb(188, 141, 141);
      border-radius: 10px;
      border: 1px solid #000;
      text-align: center;
      line-height: 30px;
      margin-bottom: 3px;
   }
}

.popup_three {
   display: flex;
   justify-content: space-between;
   border-bottom: 1px solid #ccc;
   margin: 10px;
   height: 40px;
   align-items: center;

   span {
      margin-left: 10px;
   }

}

.popup_four {
   display: flex;
   justify-content: space-between;
   margin: 10px;
   border-bottom: 1px solid #ccc;
   height: 40px;
   align-items: center;

   p {
      color: red;
   }
}

.boxpopup {
   position: relative;
}

.popup_btn {
   width: 85%;
   margin-left: 28px;
   height: 40px;
   position: absolute;
   bottom: 10px;
   border-radius: 20px;
   border: none;
   background: red;
   color: #fff;
}

.van-hairline--bottom:after {
   border-bottom-width: 0;
}

.time_box {
   width: 100%;

   .time_oi {
      height: 7vh;
      width: 85vw;
      overflow: auto;
   }
}

.time_box_list {
   width: 145%;
   display: flex;

   p {

      width: 10%;
      //  color: #fff;
      //  background: #000;
      border-radius: 5px;
      text-align: center;
      //  background: red;
      border-radius: 5px;
      text-align: center;
      border: 1px;
      //  border: 1px solid #ccc;
   }


}

.teach {
   overflow: hidden;
   .faxing {
      display: flex;
      box-sizing: border-box;
      //   margin:0 auto;
      text-align: center;
      align-items: center;
      width: 100vw;
      height: 15vh;
      overflow-x: auto;
      
      .time_two {
         width: 120vw;
         width: 60px;
         height: 60px;
         border: 1px solid #ccc; 
         margin: 10px;
       
           img{
            display: block;
            width: 40%;
            height: 40%;
            margin: 0 auto;
           margin-top: 10px;
           border-radius: 5px;
           }
           span{
            display: flex;
            margin-top: 10px;
            justify-content: center;
           }
      }
   }
}
</style>
<template>
   <div class="box">
      <van-nav-bar title="新增预约" left-text="返回" left-arrow @click-left="onClickLeft" />
      <div class="header">
         <img :src="hairdresserList.subscribeImg" alt="">
         <div>
            <p>{{ item.serveName }}</p>
            <span>￥{{ this.$route.query.item.servePrice }}</span>
         </div>
      </div>
      <div class="time">
         <div class="time_one"></div>
         <p>预约时间 <span>(必填)</span></p>
         <div class="time_two">
            <div class="time_box_list">
               <p @click="time_btn(i)" :style="{ backgroundColor: index === i ? '#e4f67c' : '#fff' }"
                  v-for="(item, i) in 10" style="margin: 5px;" ref="test">{{ weekday(item - 1) }}
                  <span>{{ getDay(item - 1) }}</span>

               </p>
            </div>
            <span class="times_one" :style="{ backgroundColor: database.type === list + item ? 'red' : '#fff' }"
               @click="btn2(list + item)" v-for="(item, i) in 12" v-show="list + item >= 10 && list + item <= 21"
               :value="list" type="info">{{ list + item }}:00</span>
         </div>
      </div>
      <div class="teach">
         <div class="time_one"></div>
         <p>发型师</p>
         <div class="faxing">
            <div v-for="(item, i) in hairdresserList.staffs" :key="item.serveId" :style="{border:i===index1?'1px solid red':''}" @click="faxing(item,i)">
               <div class="time_two">
                  <img :src="item.staffImg" alt="">
                  <span>{{ item.staffName }}</span>
               </div>
            </div>
         </div>

      </div>
      <div class="notes">
         <div class="time_one"></div>
         <p>备注</p>

         <textarea  v-model="database.val" cols="15" rows="8" style="width: 369px;resize: none;border: none;"></textarea>
      </div>

      <div class="footer">
         <span>￥{{ this.$route.query.item.servePrice }} </span>
         <button @click="showPopup">下一步</button>
      </div>

      <van-popup v-model="show" position="bottom" :style="{ height: '70%' }" class="boxpopup">
         <div class="popup">
            <img :src="this.$route.query.item.subscribeImg" alt="">
            <p>{{ item.serveName }}</p>
         </div>
         <div class="popup_one">
            <p>预约时间 :2023-{{ this.database.time_year_now }}</p>
            <div>{{ this.database.type }}:00-{{ this.database.type + 1 }}:00</div>
         </div>
         <div class="popup_three">
            <span>预约人数</span>
            <van-stepper v-model="database.value" />
         </div>
         <div class="popup_four">
            <span>合计</span>
            <p>￥{{ this.Allprice }}</p>
         </div>
         <button class="popup_btn" @click="jump()">确定</button>
      </van-popup>
   </div>
</template>

<script>
import Vue from 'vue';
import { NavBar, Popup, Toast } from 'vant';
import { Stepper } from 'vant';
import axios from 'axios';
Vue.use(Stepper);

Vue.use(Popup);
Vue.use(NavBar);

let now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes()
let myDate = hours + ':' + minutes
export default {

   mounted() {
      // this.getlist()
      console.log(this.item, '666');
      this.hairdresser()

   },


   data() {
      return {
         hairdresserList: [],
         show: false,
         item: this.$route.query.item,

         list: now.getHours(),

         //传递过去的参数
         database: {
            //预约时间段
            type: 0,
            //预约人数
            value: 1,
            price: 26,
            name: '',
            val: '',
            //预约日期
            time_year_now: '',
            //发型师id
            staffId:0,
            //发型id
            serverId:0,
            //发型师名
            serveName:''
         },
         test: null,
         myDate,
         time_list: [],
         index: 16,
         index1: 16,
      }
   },
   computed: {
      Allprice() {
         return this.$route.query.item.servePrice * this.database.value
      },
      getWeekday() {
         let date = new Date();
         let weekday = date.getDay();
         let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
         return '周' + weekdays[weekday];
      }
   },
   methods: {
      //获取美发师列表
      async hairdresser() {
         let res = await axios({
            url: 'http://192.168.20.106:8000/api/subscribe/onlineReservation',

            method: 'get',
            params: {
               serveId: this.item.serveId
            }
         })
         // console.log(res, '理发师');
         this.hairdresserList = res.data.data;
         // console.log(this.hairdresserList, '数据');
      },
      weekday(item) {

         let date = new Date();
         let weekday = date.getDay();
         let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
         return '周' + weekdays[(weekday + item) % 7];
      },
      getDay(item) {
         let now = new Date();
         now.setDate(now.getDate() + item)
         // console.log(now.getDate());
         let year = now.getFullYear();
         let month = now.getMonth() + 1;
         let day = now.getDate();
         return month + '-' + day
      },
      //时间
      time_btn(i) {
         this.index = i
         this.time_list = this.$refs.test[i].innerText
         // console.log((this.time_list.split(' ').splice(1, 1).join()), '333')
         this.database.time_year_now = this.time_list.split(' ').splice(1, 1).join()
         // console.log(this.index);
      },
      //跳转
      onClickLeft() {
         this.$router.back(-1);
      },
      //下一步
      showPopup() {
         if (this.database.type==0 ) {
            Toast('请选择时间')
            return
         }else if(this.index==16){
            Toast('日期没选呢')
            return
         } 
         else if(this.index1==16){
            Toast('发型师没选呢')
            return
         }else {
            this.show = true;
            this.database.name = this.item.serveName
               
            
            // console.log(this.database.time_year_now,'type');
         }

      },
      //发型师
      faxing(item,i){
         this.index1 = i
         
         this.database.staffId=item.staffId
         this.database.serverId = item.serverId
         this.database.serveName =item.staffName
         // console.log(this.database.staffId,'666');
         // console.log(this.database.serverId,'888');
      },
      jump() {
         // console.log(this.database, '数据');
         this.database.price = this.Allprice 
         this.$router.push({ path: '/confirmap',query:{data:this.database} })
         // console.log(this.Allprice,'总价');
      },
      btn2(i) {
         // console.log(i);
         this.database.type = i
         // console.log(this.database.type);
      }
   },
   components: {}
}
</script>


